<template>
  <div class="order-preview">
    <div class="preview">
      <p style="width: 1000px;margin: 0 auto 13px;">打印日期:{{$moment(new Date()).format("YYYY-MM-DD")}}</p>
      <el-form :model="form">
        <el-row :gutter="10"
                class="printHeader">
          <el-col :span="8"
                  class="left">
            <img class="printPic"
                 src="@/static/images/d_logo.png"
                 alt="logo" />
            <div class="span10 detail-row mb10"
                 style="word-break:break-all;">
              <label>合同编号:</label>
              <span class="detail-text">{{ orderDetails.contractNo }}</span>
            </div>
            <div v-if="fromAddress"
                 class="flex">
              <label>发货地址:</label>
              <span class="detail-text word-wrap">
                {{ fromAddress.province }}{{ fromAddress.city }}{{ fromAddress.district }}<br />{{fromAddress.address}}
              </span>
            </div>
          </el-col>
          <el-col :span="8"
                  class="center">
            <div class="span10">
              <span class="detail-text"
                    style="font-weight:bold;">{{orderDetails.customerName}}</span>
            </div>
          </el-col>
          <el-col :span="8"
                  class="right">
            <img class="printPic"
                 src="@/static/images/QRCode.png"
                 alt="code" />
            <div class="span10 detail-row mb10">
              <label>单据编号:</label>
              <span class="detail-text">{{orderDetails.orderNo}}</span>
            </div>
            <div v-if="toAddress"
                 class="flex">
              <label>收货地址:</label>
              <span class="detail-text word-wrap">
                {{toAddress.province}}{{toAddress.city}}{{toAddress.district}}<br>{{toAddress.address}}
              </span>
            </div>
          </el-col>
        </el-row>
        <hr />
        <simple-list :print="true"
                     :info="customer"
                     :config-data="shipperPrintArr" />
        <hr />
        <simple-list :print="true"
                     :info="consignee"
                     :config-data="consignPrintArr" />
        <hr />
        <simple-list :print="true"
                     :info="transport"
                     :config-data="orderTransportPrint" />
      </el-form>
      <el-table border
                :data="orderDetails.goodsList">
        <template v-for="(column,index) in tableColumn">
          <el-table-column :key="index"
                           :prop="column.prop"
                           :label="column.label"
                           :width="column.width" />
        </template>
      </el-table>
      <goods-total v-if="totalList.length>0"
                   :total-list="totalList"
                   :print="true"
                   class="mb20"
                   first-filed-name="goodsName"
                   :columns="tableColumn" />
      <div class="precautions">
        <label style="display: block;">注意事项：</label>
        <span class="detail-text">一、发货方托运的货物如实填写，不得隐瞒货物名称、数量及性质，不得在托运货物内夹带危险品、禁运物品。否则承运方在运输途中为此造成
          损失均由甲方负责。 <br />
          二、发货方若不跟人押车，卸货地址务必填清，货物包装必须完整无损，承运方按卸货地址给予按期，完整无缺运到和办理交接手续，否则造成
          损失各负其责。 <br />
          三、发货方托运货物时、必须参加保险，如不参加保险，出现货损、货差由发货方自负。
        </span>
      </div>
      <el-row :gutter="10">
        <el-col :span="8">
          <label>核对人: </label>
          <span class="sign-text"></span>
        </el-col>
        <el-col :span="8">
          <label>签收人: </label>
          <span class="sign-text"> {{ orderDetails.sign && orderDetails.sign.signerName }}</span>
        </el-col>
        <el-col :span="8">
          <label>签收时间: </label>
          <span class="sign-text">{{ orderDetails.signTime }}</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import SimpleList from '@components/orderDetail/SimpleList.vue'
import GoodsTotal from "@/views/createOrder/createOrder/components/GoodsTotal.vue"
import { shipperPrintArr, consignPrintArr, orderTransportPrint } from '@components/orderDetail/orderData'
import { order } from '@/api/index'
export default {
  name: "OrderPreview",
  components: { SimpleList, GoodsTotal },
  data () {
    return {
      form: {},
      sign: {},
      signBy: {},
      orderDetails: {},
      orderId: null,
      status: 0,
      shipperPrintArr, consignPrintArr, orderTransportPrint,
      customer: {}, consignee: {}, transport: {},
      fromAddress: {},
      toAddress: {},
      totalList: [],
      tableColumn: [{
        label: "序号",
        prop: "index",
        width: "50"
      }, {
        label: "物品编码",
        prop: "barcode",
        width: "80"
      }, {
        label: "物品名称",
        prop: "goodsName",
        width: "100"
      }, {
        label: "规格",
        prop: "spec",
        width: "50"
      }, {
        label: "物品数量",
        prop: "quantity",
        width: "80"
      }, {
        label: "总重量 (公斤)",
        prop: "totalWeight",
      }, {
        label: "总体积 (方)",
        prop: "totalVolume",
      }, {
        label: "实签数量",
        prop: "signQuantity",
        width: "80"
      }, {
        label: "异常数量",
        prop: "exceptionQuantity",
        width: "80"
      }, {
        label: "异常分类",
        prop: "exceptionText",
        width: "100"
      }, {
        label: "批次",
        prop: "batchNo",
        width: "80"
      },],
      typeFlag: ''
    }
  },
  computed: {
    signs () {
      return this.status == 40 ? this.receiptSignTime : this.orderDetails.signAt;
    },
    receiptSignTime () {
      return this.orderDetails.receiptSignTime ? this.orderDetails.receiptSignTime : this.orderDetails.signAt
    }
  },
  created () {
    this.orderId = Number(this.$route.query.orderId)
    this.status = Number(this.$route.query.status)
    this.getDetail()
  },
  methods: {
    exceptionListData (data) {
      let list = JSON.parse(JSON.stringify(data))
      delete list.quantity
      return list
    },
    async getDetail () {
      let { data } = await order.orderPreview(this.orderId)
      data.goodsList.map((item, index) => item.index = index + 1)
      this.orderDetails = data;
      this.fromAddress = data.fromAddress;
      this.toAddress = data.toAddress;
      this.customer = {
        ...data,
        ...data.fromAddress,
      }
      this.consignee = {
        ...data,
        ...data.toAddress,
      }
      this.transport = {
        ...data,
        insureDesc: data.insure ? '保价' : '不保价'
      }
      this.sign = data.sign || {}
      if (data.sign) {
        this.signBy = data.sign.signBy
      }
      if (data.attachments) {
        this.fileList = data?.attachments.filter(x => x.type === 1)
        this.photo = data?.attachments.filter(x => x.type === 2)
      }
      this.orderDetails.goodsList.forEach(item => {
        let obj = {
          signQuantity: item.quantity,
          exceptionDesc: null,
          exceptionText: '',
          exceptionQuantity: 0,
          totalWeight: (item.quantity * item.weight).toString().indexOf('.') != -1 ? (item.quantity * item.weight).toFixed(2) : item.quantity * item.weight,
          totalVolume: (item.quantity * item.volume).toString().indexOf('.') != -1 ? (item.quantity * item.volume).toFixed(2) : item.quantity * item.volume
        }
        Object.assign(item, obj)
        if (this.status === 30) { //待回单
          if (!item.goodsReceipt || !item.goodsSign) {
            item.goodsSign = obj;
          } else if (Object.keys(item.goodsSign).length) {
            Object.assign(item, this.exceptionListData(item.goodsSign));
            item.signQuantity = item.goodsSign.quantity;
            item.exceptionText = this.exceptionText(item.goodsSign);
            this.typeFlag = 'sign'
          } else {
            item.goodsSign = obj;
          }
        } else if (this.status === 40) { // 已回单
          if (!item.goodsReceipt || !item.goodsSign) {
            item.goodsSign = obj;
          } else if (Object.keys(item.goodsReceipt).length) {
            Object.assign(item, this.exceptionListData(item.goodsReceipt));
            item.signQuantity = item.goodsReceipt.quantity;
            item.exceptionText = this.exceptionText(item.goodsReceipt);
            this.typeFlag = 'receipt'
          } else {
            item.goodsSign = obj;
          }
        }
      })
      this.accountTotal()
    },
    accountTotal () {
      let signQuantity = 0 //物品实签数量
      let exceptionQuantity = 0
      let signSignedQuantity = 0 //签收实签数量
      this.orderDetails.goodsList.forEach(item => {
        signQuantity += Number(item.signQuantity || 0)//实签数量
        signSignedQuantity += Number(item.goodsSign?.quantity || 0)//实签数量
        exceptionQuantity += Number(item.exceptionQuantity)//异常数量
      })
      console.log(this.orderDetails);
      this.totalList = [{
        barcode: "补差",
        totalVolume: this.orderDetails.volumeAddition,
        totalWeight: this.orderDetails.weightAddition
      },
      {
        barcode: "合计",
        quantity: this.orderDetails.totalQuantity,//总数量
        totalVolume: this.orderDetails.calculateVolume.toString().indexOf('.') != -1 ? (this.orderDetails.calculateVolume).toFixed(2) : this.orderDetails.calculateVolume,//总体积
        totalWeight: this.orderDetails.calculateWeight.toString().indexOf('.') != -1 ? (this.orderDetails.calculateWeight).toFixed(2) : this.orderDetails.calculateWeight,//总重量
        signQuantity: this.typeFlag == 'sign' ? this.orderDetails.totalSignQuantity : this.orderDetails.totalReceiptQuantity,//实签数量
        exceptionQuantity: this.typeFlag == 'sign' ? this.orderDetails.totalSignExceptionQuantity : this.orderDetails.totalReceiptExceptionQuantity,//异常数量
        signSignedQuantity: this.typeFlag == 'sign' ? this.orderDetails.totalSignQuantity : this.orderDetails.totalReceiptQuantity //实签数量
      }]
    },
    exceptionText (data) {
      let { damageQuantity, lackQuantity, loseQuantity, otherQuantity } = data;
      let exceptionText = `${damageQuantity ? `破损 ${damageQuantity}，` : ""}${lackQuantity ? `缺少 ${lackQuantity}，` : ""
        }
          ${loseQuantity ? `丢失 ${loseQuantity}，` : ""}${otherQuantity ? `其他 ${otherQuantity}，` : ""
        }`;
      return exceptionText;
    }
  }
}
</script>
<style lang="scss" scoped>
.order-preview {
  height: 100%;
  overflow: auto;
}
.preview {
  width: 1200px;
  background: var(--prev-bg-white);
  margin: 0 auto;
  padding: 50px 0;
}
hr {
  width: 1000px;
  border: none;
  height: 1px;
  background-color: #6666;
  margin: 5px auto 15px;
}
.printPic {
  height: 30px;
}
.sign-text {
  border-bottom: 1px solid #000;
  display: inline-block;
  width: 70%;
}
.precautions {
  line-height: 20px;
  margin-bottom: 10px;
  padding: 20px 0;
}
/deep/ .el-table,
.mb20,
.precautions,
.el-row,
.el-table__header {
  width: 1000px;
  margin: 0 auto !important;
}
/deep/ .el-table th.el-table__cell {
  background: var(--prev-bg-white);
  .cell {
    height: 40px;
    border-left: none;
  }
}
/deep/ .el-col-24 {
  .detail-text {
    width: 1000px;
    white-space: normal;
    word-wrap: break-word;
  }
}
.word-wrap {
  white-space: normal;
  word-wrap: break-word;
  width: 260px;
}
</style>